<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24">
        <div v-show="showSearch" class="mb-[10px]">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="报告编号" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入报告编号" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>

        <el-card shadow="hover">
          <template #header>
            <el-row :gutter="10">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
              </el-col>
              <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
            </el-row>
          </template>

          <el-table v-loading="loading" border :data="listData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <template v-for="(item, index) in columns">
              <el-table-column v-if="item.visible" :key="item.key" :label="item.label" align="center" :prop="item.key" >
                <template v-slot="scope">
                  <template v-if="item.key === 'status'">
                    <span class="card-btn" :style="{
                      'background-color': fcStatus(scope.row.status)
                    }">{{ scope.row.status }}</span>
                  </template>
                </template>
              </el-table-column>
            </template>

            <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width" align="center">
              <template #default="scope">
                <el-button link type="primary" icon="View" @click="reprotLook">查看报告</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>

    <reprotLookVue ref="reprotLookRef"></reprotLookVue>

  </div>
</template>

<script setup>
// 方法
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 组件
import reprotLookVue from '@/views/report/reprotLook/index.vue'
const reprotLookRef = ref(null);

// 列显隐信息
const columns = ref([
  { key: '报告编号', label: `报告编号`, visible: true, children: [] },
  { key: '样品编号', label: `样品编号`, visible: true, children: [] },
  { key: '客户名称', label: `客户名称`, visible: true, children: [] },
  { key: '样品描述', label: `样品描述`, visible: true, children: [] },
  { key: '检验项目', label: `检验项目`, visible: true, children: [] },
  { key: '报告状态', label: `报告状态`, visible: true, children: [] },
  { key: '报告生成日期', label: `报告生成日期`, visible: true, children: [] },
  { key: '预计完成日期', label: `预计完成日期`, visible: true, children: [] },
  { key: '负责人', label: `负责人`, visible: true, children: [] },
  { key: '审核人', label: `审核人`, visible: true, children: [] },
  { key: '备注', label: `备注`, visible: true, children: [] },
  { key: '状态', label: `状态`, visible: true, children: [] },
  { key: '创建人', label: `创建人`, visible: true, children: [] },
  { key: '创建时间', label: `创建时间`, visible: true, children: [] },
]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const total = ref(0)
const showSearch = ref(true);
const loading = ref(true);
const listData = ref([
  {
    "报告编号": "REP-202507001",
    "样品编号": "SMP-20250701",
    "客户名称": "北京科技有限公司",
    "样品描述": "金属合金板材，规格100mm×50mm×2mm",
    "检验项目": "抗拉强度、屈服强度、硬度测试",
    "报告状态": "已完成",
    "报告生成日期": "2025-07-05",
    "预计完成日期": "2025-07-08",
    "负责人": "张三",
    "审核人": "李四",
    "备注": "样品边缘有轻微氧化，不影响检测结果",
    "状态": "有效",
    "创建人": "系统管理员",
    "创建时间": "2025-07-03 09:15:22"
  },
  {
    "报告编号": "REP-202507002",
    "样品编号": "SMP-20250702",
    "客户名称": "上海新能源研究院",
    "样品描述": "锂电池正极材料粉末，纯度≥99.5%",
    "检验项目": "元素含量分析、粒度分布测试",
    "报告状态": "审核中",
    "报告生成日期": "2025-07-06",
    "预计完成日期": "2025-07-10",
    "负责人": "王五",
    "审核人": "赵六",
    "备注": "需加急处理，客户要求7月10日前出具报告",
    "状态": "处理中",
    "创建人": "检测员A",
    "创建时间": "2025-07-04 14:30:15"
  },
  {
    "报告编号": "REP-202507003",
    "样品编号": "SMP-20250703",
    "客户名称": "广州化工有限公司",
    "样品描述": "液体化工原料，容积500mL",
    "检验项目": "pH值、密度、沸点测定",
    "报告状态": "待审核",
    "报告生成日期": "2025-07-07",
    "预计完成日期": "2025-07-12",
    "负责人": "钱七",
    "审核人": "孙八",
    "备注": "样品需在2-8℃冷藏保存",
    "状态": "待处理",
    "创建人": "检测员B",
    "创建时间": "2025-07-05 10:05:33"
  },
  {
    "报告编号": "REP-202507004",
    "样品编号": "SMP-20250704",
    "客户名称": "深圳电子科技有限公司",
    "样品描述": "PCB电路板，型号PCB-202507",
    "检验项目": "电路导通性、绝缘电阻测试",
    "报告状态": "已驳回",
    "报告生成日期": "2025-07-08",
    "预计完成日期": "2025-07-15",
    "负责人": "周九",
    "审核人": "吴十",
    "备注": "审核意见：部分数据缺失，需补充检测记录",
    "状态": "异常",
    "创建人": "检测员C",
    "创建时间": "2025-07-06 16:22:48"
  },
  {
    "报告编号": "REP-202507005",
    "样品编号": "SMP-20250705",
    "客户名称": "成都生物研究所",
    "样品描述": "生物组织切片，显微镜观察样本",
    "检验项目": "细胞形态观察、活性检测",
    "报告状态": "检测中",
    "报告生成日期": "null",
    "预计完成日期": "2025-07-18",
    "负责人": "郑十一",
    "审核人": "null",
    "备注": "需使用荧光显微镜进行检测",
    "状态": "进行中",
    "创建人": "研究员甲",
    "创建时间": "2025-07-07 08:45:10"
  },
  {
    "报告编号": "REP-202507006",
    "样品编号": "SMP-20250706",
    "客户名称": "杭州食品有限公司",
    "样品描述": "袋装零食，净重200g",
    "检验项目": "微生物指标、营养成分分析",
    "报告状态": "已完成",
    "报告生成日期": "2025-07-09",
    "预计完成日期": "2025-07-10",
    "负责人": "王十二",
    "审核人": "李十三",
    "备注": "检测结果符合国家标准，可正常上市",
    "状态": "有效",
    "创建人": "质量检测员",
    "创建时间": "2025-07-08 09:30:25"
  },
  {
    "报告编号": "REP-202507007",
    "样品编号": "SMP-20250707",
    "客户名称": "武汉建筑材料公司",
    "样品描述": "水泥样品，袋装50kg",
    "检验项目": "抗压强度、凝结时间测试",
    "报告状态": "待检测",
    "报告生成日期": "null",
    "预计完成日期": "2025-07-20",
    "负责人": "张十四",
    "审核人": "null",
    "备注": "样品需在恒温恒湿环境下存放",
    "状态": "未开始",
    "创建人": "采购部专员",
    "创建时间": "2025-07-08 14:10:37"
  },
  {
    "报告编号": "REP-202507008",
    "样品编号": "SMP-20250708",
    "客户名称": "西安汽车零部件厂",
    "样品描述": "汽车刹车片，型号A-2025",
    "检验项目": "摩擦系数、磨损量测试",
    "报告状态": "审核中",
    "报告生成日期": "2025-07-09",
    "预计完成日期": "2025-07-12",
    "负责人": "赵十五",
    "审核人": "钱十六",
    "备注": "测试时需模拟高温工况",
    "状态": "处理中",
    "创建人": "技术部工程师",
    "创建时间": "2025-07-09 10:22:55"
  },
  {
    "报告编号": "REP-202507009",
    "样品编号": "SMP-20250709",
    "客户名称": "南京环保科技公司",
    "样品描述": "水质检测样本，500mL密封瓶",
    "检验项目": "pH值、重金属含量、COD检测",
    "报告状态": "已完成",
    "报告生成日期": "2025-07-09",
    "预计完成日期": "2025-07-11",
    "负责人": "孙十七",
    "审核人": "周十八",
    "备注": "检测结果显示重金属含量超标，需进一步复核",
    "状态": "待复核",
    "创建人": "环境检测员",
    "创建时间": "2025-07-07 15:40:12"
  },
  {
    "报告编号": "REP-202507010",
    "样品编号": "SMP-20250710",
    "客户名称": "重庆医疗器械厂",
    "样品描述": "一次性注射器，规格5mL",
    "检验项目": "无菌检测、活塞滑动性测试",
    "报告状态": "已驳回",
    "报告生成日期": "2025-07-08",
    "预计完成日期": "2025-07-15",
    "负责人": "吴十九",
    "审核人": "郑二十",
    "备注": "无菌检测结果不合格，需重新抽样检测",
    "状态": "异常",
    "创建人": "质检部主管",
    "创建时间": "2025-07-06 09:18:44"
  }
]);

// 获取状态颜色
const fcStatus = (status) => {
  const style = {
    '待审核': '#79bbff',
    '审核中': '#f29b5e',
    '通过': '#49b07f'
  }
  return style[status]
}

// 获取数据
const getList = () => {
  loading.value = false
}

// 搜索
const handleQuery = () => {}

// 重置
const resetQuery = () => {
  for(let i in queryParams.value) {
    if(i !== 'pageNum' && i !== 'pageSize') {
      queryParams.value[i] = undefined
    }
  }
  handleQuery()
}

// 多选
const handleSelectionChange = () => {}

// 新增
const handleAdd = () => {}

// 查看报告
const reprotLook = () => {
  reprotLookRef.value.open()
}

getList()
</script>
